import React, { Component } from 'react';
import { Link } from 'react-router-dom'
class Com extends Component {
  constructor(props) {
    super(props);
    this.state = {
      popList: []
    }
  }
  componentDidMount () {
    let name = '大米';
    let fname = JSON.stringify(name)
    fetch(`https://sun.daxunxun.com/api/food/kind?f_name=`+fname)
    .then(res => res.json())
    .then(data => {
      console.log(data)
      this.setState({
        popList: data
      })
    })
  }
  goDetail (fid){
    this.props.history.push('/detail/' + fid)
  }
  render () {
    let list = this.state.popList
    let popList = []
    for ( var i in list) {
      let fid = list[i].f_id
      popList.push (
        <li key={ list[i].f_id }>
          <img src={ list[i].banner } onClick={ this.goDetail.bind(this, fid) } alt=""/>
          <p className="menu-ellipsis">{ list[i].u_name }</p>
        </li>
      )
    }
    return (
      <div className="menu-right">
        <div className="menu-right1"></div>
        <div className="menu-right-top">
          <span>流行菜单</span>
          <span><Link to="/kind">全部</Link></span>
        </div>
        <div className="menu-list">
          <ul>
            { popList }
          </ul>
        </div>
      </div>
    )
  }
}

export default Com;




